<template>
	<view class="content">
		<view class="top-view">
			<image src="@/static/searchs.png" mode=""></image>
			<input placeholder-class="serce" v-model="name"  @input="input" placeholder="搜索关键词" />
		</view>
		<!-- <view class="timeLimit">
			<view class="timeLeft" @tap="goMiao">
				<view class="title">限时秒杀</view>
				<view class="content">
					<u-count-down :timestamp="timestamp" :show-days="false" separator-color="#ee1b1b" bg-color="#ee1b1b" color="#ffffff" font-size="24" :show-border="true" border-color="#ee1b1b"></u-count-down>
				</view>
			</view>
			<view class="timeRight" @tap="goPin">
				<view class="title">拼团专区</view>
				<view class="contents">拼着买享更多优惠</view>
			</view>
		</view> -->
		<view class="options display">
			<view class="option" @click="options(0)">
				<text style="padding-right: 5px;">默认排序</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
				<!-- <u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon> -->
			</view>
			<view class="option" @click="options(1)">
				<text style="padding-right: 5px;">销量</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="sales!=3"></u-icon>
				<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
			</view>
			<view class="option" @click="options(2)">
				<text style="padding-right: 5px;">价格</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="price!=5"></u-icon>
				<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
			</view>
		</view>
		<view class="waterBox">
			<u-waterfall v-model="shopList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.image" :shopname="item.name"  :newprice="item.prices" :oldprice="item.market_price"  @click.native="go_shopdetail(item)"></shop>
				</template>
				<template v-slot:right="{rightList}">
					<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.image" :shopname="item.name"  :newprice="item.prices" :oldprice="item.market_price" @click.native="go_shopdetail(item)"></shop>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	import shop from "@/components/shop.vue"
	
	export default {
		components:{
			shop
		},
		data() {
			return {
				timestamp:0,
				shopList:[],
				sales:0,
				price:0,
				page:1,
				name:''
			}
		},
		onLoad() {
			this.getshopList(1,1,1)
		},
		onReachBottom() {//触底获取推荐商品
			this.page+=1
			// console.log(this.page);
			// this.shopList = []
			this.getshopList(this.page,this.sales,this.price) 
		},
		methods: {
			input(){
				this.shopList=[]
				this.$refs.uWaterfall.clear(); //清空列表数据
				this.getshopList(1,'','')
			},
			go_shopdetail(e){
				uni.navigateTo({
					url:'shop/shopDetail?shopid='+e.id
				})
			},
			goPin(){
				uni.navigateTo({
					url:'pinShop/pinShop'
				})
			},
			goMiao(){
				uni.navigateTo({
					url:'xianshiBuy'
				})
			},
			options(e){ //选择排序
				if(e==0){
					this.page=1
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getshopList(1,'') //获取推荐商品
				}
				if(e==1){
					this.page=1
					this.sales= this.sales==3 ? 4 : 3
					console.log(this.sales);
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getshopList(1,this.sales) //排序获取推荐商品
				}
				if(e==2){
					this.page=1
					this.price= this.price==5 ? 6 : 5
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getshopList(1,this.price) //排序获取推荐商品
				}
			},
			getshopList(page,sort){ //获取商品列表
				// console.log(page);
				// console.log(sales);
				// console.log(price);
				// console.log(this.classid);
				// console.log(this.keyword);
				// this.$myRequest('',{
				// 	page:page,
				// 	sales:sales,price:price,   //  1/2  升序/降序
				// 	category_id:this.classid,
				// 	name:this.keyword,
				// }).then(res=>{
					
					
				// })
				this.$myRequest({
					url: 'api/goods/goodsList',
					method:'POST',
					data:{
						page:page,
						// sales:sales,
						// price:price,   //  1/2  升序/降序
						// category_id:this.classid,
						sort:sort,
						name:this.name,
						num:10,
						// store_id:uni.getStorageSync('store_id')
					}
				}).then(res => {
					console.log(res.data);
					if(res.data.code==1){
						let data=res.data.data
						if(data.goodslist.length>0){
							this.shopList.push(...data.goodslist)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #F7F7F7;}
.content{
	width: 90%;
	margin: auto;
	.top-view {
		margin: 20rpx auto;
		height: 80rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
		input {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 80rpx;
			color: #807B7A;
			margin-left: 40rpx;
		}
		.serce{
			color: #807B7A;
		}
	}
	.timeLimit{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 20rpx 0 40rpx 0;
		.timeLeft,.timeRight{
			width: 45%;
			height: 160rpx;
			font-size: 14px;
			line-height: 20px;
			color: #333333;
			padding: 16px;
			border-radius: 16rpx;
		}
		image{
			width:160rpx;
			height: 104rpx;
			margin-left: 54rpx;
			margin-top: 24rpx;
		}
		.contents{
			font-size: 12px;
			color: #999999;
		}
		.timeLeft{
			background: linear-gradient(180deg, #FFDFB5 0%, #FFFFFF 100%);
		}
		.timeRight{
			background: linear-gradient(180deg, #FF9C9C 0%, #FFFFFF 100%);
		}
	}
	.options{
		padding-bottom: 20rpx;
		.option{
			padding-right: 50rpx;
		}
	}
	
}
</style>
